<template>

  <div class="app-container">

    <el-row>

      <el-col :span="24">

        <div class="grid-content bg-purple-dark">

          <el-form ref="form" :model="form" label-width="80px">

            <el-row>

              <el-form-item label="状态">
                <el-select v-model="form.appUsageStatus" placeholder="请选择">
                  <el-option label="启用" value="1"></el-option>
                  <el-option label="停用" value="2"></el-option>
                </el-select>
              </el-form-item>

              <el-form-item label="住户类型">
                <el-select v-model="form.residentTypeId" placeholder="请选择">
                  <el-option v-for="residentType in residentTypeList" :key="residentType.id"
                    :label="residentType.typeName" :value="residentType.id"></el-option>
                </el-select>
              </el-form-item>

              <el-form-item label="楼栋">
                <el-select v-model="form.buildingblockId" placeholder="请选择">
                  <el-option v-for="buildingblock in buildingblockList" :key="buildingblock.id"
                    :label="buildingblock.blockNumber" :value="buildingblock.id"></el-option>
                </el-select>
              </el-form-item>

              <el-form-item label="单元">
                <el-select v-model="form.unitId" placeholder="请选择">
                  <el-option v-for="unit in unitList" :key="unit.id"
                    :label="unit.unitNumber" :value="unit.id"></el-option>
                </el-select>
              </el-form-item>

              <el-form-item label="楼层">
                <el-select v-model="form.floorId" placeholder="请选择">
                  <el-option v-for="floor in floorList" :key="floor.id"
                    :label="floor.floorNumber" :value="floor.id"></el-option>
                </el-select>
              </el-form-item>

              <el-form-item label="排序">
                <el-select v-model="form.sort" placeholder="请选择">
                  <el-option label="按添加时间升序" value="1"></el-option>
                  <el-option label="按添加时间降序" value="2"></el-option>
                </el-select>
              </el-form-item>

            </el-row>

            <el-row>

              <el-form-item label="年龄">
                <el-select v-model="form.age" placeholder="请选择">
                  <el-option label="12-30岁" value="1"></el-option>
                </el-select>
              </el-form-item>

              <el-form-item label="住户标签">
                <el-select v-model="form.residentLabelId" placeholder="请选择">
                  <el-option v-for="residentLabel in residentLabelsList" :key="residentLabel.id"
                    :label="residentLabel.labelName" :value="residentLabel.id"></el-option>
                </el-select>
              </el-form-item>

              <el-form-item label="证件类型">
                <el-select v-model="form.documentTypeId" placeholder="请选择">
                  <el-option v-for="documentType in documentTypeList" :key="documentType.id"
                    :label="documentType.documentName" :value="documentType.id"></el-option>
                </el-select>
              </el-form-item>

              <el-form-item label="证件号">
                <el-input v-model="form.documentNumber" placeholder="请输入"></el-input>
              </el-form-item>

              <el-form-item label="姓名">
                <el-input v-model="form.name" placeholder="请输入"></el-input>
              </el-form-item>

              <el-form-item label="手机号">
                <el-input v-model="form.phoneNumber" placeholder="请输入"></el-input>
              </el-form-item>
            </el-row>

          </el-form>

          <el-row>

            <el-button @click="getList" type="success">查询</el-button>
            <el-button type="primary" @click="toadd">新增</el-button>
            <el-button type="primary">批量导入</el-button>
            <el-button @click="form = {}" type="primary">一键重置</el-button>
            <el-button type="primary">自助登记配置</el-button>

          </el-row>

        </div>

      </el-col>

    </el-row>

    <!-- 表格 -->

    <el-row :gutter="20">

      <el-col :span="24">

        <div class="grid-content bg-purple">

          <el-table :data="tableData" border style="width: 100%">
            <el-table-column prop="name" label="姓名" width="80px">
            </el-table-column>
            <el-table-column prop="photoInfo" label="图片" width="80px">
            </el-table-column>
            <el-table-column prop="typeName" label="类型" width="80px">
            </el-table-column>
            <el-table-column prop="documentName" label="证件类型">
            </el-table-column>
            <el-table-column prop="documentNumber" label="证件号">
            </el-table-column>
            <el-table-column prop="phoneNumber" label="手机号">
            </el-table-column>
            <el-table-column prop="blockNumber" label="楼栋">
            </el-table-column>
            <el-table-column prop="unitNumber" label="单元">
            </el-table-column>
            <el-table-column prop="floorNumber" label="楼层">
            </el-table-column>
            <el-table-column prop="roomNumber" label="房屋号">
            </el-table-column>
            <el-table-column prop="addTime" label="添加时间">
            </el-table-column>
            <el-table-column prop="addedBy" label="添加人" width="100px">
            </el-table-column>
            <el-table-column label="状态" width="50px">
              <template v-slot="scope">
                {{ scope.row.appUsageStatus == 1 ? '启用' : '停用' }}
              </template>
            </el-table-column>
            <el-table-column label="操作" width="200px">
              <template v-slot="scope">
                <el-button @click="updateAppUsageStatus(scope.row)" type="text" size="small">{{ scope.row.appUsageStatus == 1 ? '停用' : '启用' }}</el-button>
                <el-button type="text" size="small">编辑</el-button>
                <el-button type="text" size="small">删除</el-button>
                <el-button type="text" size="small">详情</el-button>
              </template>
            </el-table-column>
          </el-table>

          <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="pageNum"
            :page-sizes="[2,4,6,8]" :page-size="pageSize" layout="total, sizes, prev, pager, next, jumper"
            :total="total">
          </el-pagination>

        </div>

      </el-col>

    </el-row>

    <!-- 新增弹框 -->
    <el-dialog title="新增/编辑用户" :visible.sync="dialogFormVisible" width="1000px" append-to-body>
      <el-tabs v-model="activeName" @tab-click="handleClick" value="first">
        <el-tab-pane label="人房信息" name="first">
          <span>基本信息</span>
          <hr>
          <el-form ref="residentsForm" :rules="rules" :model="residentsForm" label-width="80px">
            <el-row>

              <el-form-item label="姓名" prop="name">
                <el-input v-model="residentsForm.name"></el-input>
              </el-form-item>

              <el-form-item label="性别" prop="sex">
                <el-select v-model="residentsForm.region" placeholder="请选择性别">
                  <el-option label="男" value="1"></el-option>
                  <el-option label="女" value="0"></el-option>
                </el-select>
              </el-form-item>

            </el-row>

            <el-row>

              <el-form-item label="证件类型">
                <el-select v-model="residentsForm.documentTypeId" placeholder="请选择">
                  <el-option v-for="documentType in documentTypeList" :key="documentType.id"
                             :label="documentType.documentName" :value="documentType.id"></el-option>
                </el-select>
              </el-form-item>

              <el-form-item label="证件号">
                <el-input v-model="residentsForm.name"></el-input>
              </el-form-item>

            </el-row>

            <el-row>

              <el-form-item label="住户类型"  prop="residentTypeid">
                <el-select v-model="residentsForm.residentTypeId" placeholder="请选择">
                  <el-option v-for="residentType in residentTypeList" :key="residentType.id"
                             :label="residentType.typeName" :value="residentType.id"></el-option>
                </el-select>
              </el-form-item>

              <el-form-item label="手机号" prop="phoneNumber">
                <el-input v-model="residentsForm.phoneNumber"></el-input>
              </el-form-item>

            </el-row>

            <el-row>

              <el-form-item label="住户标签">
                <el-select v-model="residentsForm.residentLabelId" placeholder="请选择">
                  <el-option v-for="residentLabel in residentLabelsList" :key="residentLabel.id"
                             :label="residentLabel.labelName" :value="residentLabel.id"></el-option>
                </el-select>
              </el-form-item>

            </el-row>

          </el-form>

          <span>房间信息</span>
          <font color="red">（请选择房屋并添加，否则将无法提交）</font>
          <hr>

          <el-form ref="form" :model="buildingblockform" label-width="80px">

            <el-row>

              <el-form-item label="楼栋">
                <el-select v-model="buildingblockform.buildingblockId" placeholder="请选择">
                  <el-option v-for="buildingblock in buildingblockList" :key="buildingblock.id"
                             :label="buildingblock.blockNumber" :value="buildingblock.id"></el-option>
                </el-select>
              </el-form-item>

              <el-form-item label="单元">
                <el-select v-model="buildingblockform.unitId" placeholder="请选择">
                  <el-option v-for="unit in unitList" :key="unit.id"
                             :label="unit.unitNumber" :value="unit.id"></el-option>
                </el-select>
              </el-form-item>

              <el-form-item label="楼层">
                <el-select v-model="buildingblockform.floorId" placeholder="请选择">
                  <el-option v-for="floor in floorList" :key="floor.id"
                             :label="floor.floorNumber" :value="floor.id"></el-option>
                </el-select>
              </el-form-item>

              <el-form-item label="房间号">
                <el-select v-model="buildingblockform.roomId" placeholder="请选择">
                  <el-option v-for="room in roomList" :key="room.id"
                             :label="room.roomNumber" :value="room.id"></el-option>
                </el-select>
              </el-form-item>

              <el-form-item>
                <el-button type="primary">添加</el-button>
              </el-form-item>

            </el-row>
          </el-form>

          <el-button type="primary">取消</el-button>
          <el-button type="primary">确定</el-button>
        </el-tab-pane>


        <el-tab-pane label="人脸门禁信息" name="second">

          <span>照片信息</span>
          <hr>

          <el-form ref="form" :rules="rules" :model="renlianform" label-width="80px">

            <el-form-item label="图片:" porp="imageUrl">
              <el-upload class="avatar-uploader" action="https://jsonplaceholder.typicode.com/posts/" name="file"
                :show-file-list="false" :on-success="handleAvatarSuccess" :before-upload="beforeAvatarUpload">
                <img v-if="imageUrl" :src="imageUrl" class="avatar">
                <i v-else class="el-icon-plus avatar-uploader-icon"></i>
              </el-upload>
            </el-form-item>

          </el-form>

          <span>门禁状态</span>
          <hr>

          <div style="position: relative;left: 100px;">

            <p>到期时间：</p> {{ }}
            <el-button type="primary">设置门禁权限</el-button>

          </div>

          <div style="position: relative;left: 700px;">
            <el-button type="primary">取消</el-button>
            <el-button type="primary">确定</el-button>
          </div>

        </el-tab-pane>

        <el-tab-pane label="自助登记信息" name="third">

          <span>自助登记信息</span>
          <hr>

          <el-form ref="form" :rules="rules" :model="renlianform" label-width="80px">

            <el-row>
              <el-form-item label="车牌号" prop="name">
                <el-input v-model="renlianform.name"></el-input>
              </el-form-item>

              <el-form-item label="合作单位" prop="name">
                <el-input v-model="renlianform.name"></el-input>
              </el-form-item>

            </el-row>

            <el-form-item>
              <el-button type="primary">取消</el-button>
              <el-button type="primary">确定</el-button>
            </el-form-item>

          </el-form>


        </el-tab-pane>

        <el-tab-pane label="工作信息" name="fourth">

          <span>工作信息</span>
          <hr>

          <el-form ref="form" :rules="rules" :model="renlianform" label-width="80px">

            <el-row>

              <el-form-item label="职业类别">
                <el-select v-model="form.region" placeholder="请选择">
                  <el-option label="区域一" value="shanghai"></el-option>
                  <el-option label="区域二" value="beijing"></el-option>
                </el-select>
              </el-form-item>


              <el-form-item label="工作单位">
                <el-input v-model="renlianform.name" placeholder="请输入"></el-input>
              </el-form-item>

            </el-row>

            <el-form-item>
              <el-button type="primary">取消</el-button>
              <el-button type="primary">确定</el-button>
            </el-form-item>

          </el-form>


        </el-tab-pane>
      </el-tabs>
    </el-dialog>

  </div>

</template>



<script>
import {
  findPage,
  findResidentsTypes,
  findBuildingblock,
  findUnit,
  findFloor,
  findRoom,
  findResidentLabels,
  findDocumentTypes,
  updateAppUsageStatus,
} from "@/api/residents/residents/residents";

export default {

  data() {

    return {
      form: {},
      tableData: [],
      pageNum: 1,
      pageSize: 2,
      total: 0,
      dialogFormVisible: false,
      activeName: 'first',
      residentsForm: {},
      residentTypeList: [],
      buildingblockList:[],
      floorList:[],
      unitList:[],
      roomList:[],
      residentLabelsList:[],
      documentTypeList:[],
      rules: {
        name: [
          { required: true, message: '请输入姓名', trigger: 'blur' },
          { min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' }
        ],
        sex: [
          { required: true, message: '请选择', trigger: 'blur' }
        ],
        residentTypeid: [
          { required: true, message: '请选择', trigger: 'blur' }
        ],
        phoneNumber: [
          { required: true, message: '请输入', trigger: 'blur' }
        ],
        imageUrl: [
          { required: true, message: '请选择图片', trigger: 'blur' }
        ]
      },
      buildingblockform: {},
      renlianform: {},
      imageUrl: "",


    }

  },



  methods: {
    //停启用app
    updateAppUsageStatus(row){
      this.$confirm('此操作将停用该app, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        updateAppUsageStatus(row).then(res => {
          this.getList();
        })
      })

    },

    //添加弹框
    toadd() {
      this.dialogFormVisible = true;
    },
    //图片上传
    handleAvatarSuccess(res, file) {
      this.imageUrl = URL.createObjectURL(file.raw);
    },
    beforeAvatarUpload(file) {
      const isJPG = file.type === 'image/jpeg';
      const isLt2M = file.size / 1024 / 1024 < 2;

      if (!isJPG) {
        this.$message.error('上传头像图片只能是 JPG 格式!');
      }
      if (!isLt2M) {
        this.$message.error('上传头像图片大小不能超过 2MB!');
      }
      return isJPG && isLt2M;
      },
    //分页
      handleSizeChange(val) {
        console.log(`每页 ${val} 条`);
        this.pageSize=val;
        this.getList();
      },
      handleCurrentChange(val) {
        console.log(`当前页: ${val}`);
        this.pageNum=val;
        this.getList();
      },
    //查询
      getList(){
        findPage(this.pageNum,this.pageSize,this.form).then(res => {

          this.tableData = res.records;
          this.total = res.total;
        })
      },
    //住户类型
      findResidentsTypes(){
        findResidentsTypes().then(res => {
          this.residentTypeList = res;
        })
      },
    //楼栋
      findBuildingblock(){
        findBuildingblock().then(res => {
          this.buildingblockList = res;
        })
      },
    //单元
      findUnit(){
        findUnit().then(res => {
          this.unitList = res;
        })
      },
    //楼层
      findFloor(){
        findFloor().then(res => {
          this.floorList = res;
        })
      },
    //房间
      findRoom(){
        findRoom().then(res => {
          this.roomList = res;
        })
      },
    //标签
      findResidentLabels(){
        findResidentLabels().then(res => {
          this.residentLabelsList = res;
        })
      },
    //证件
      findDocumentTypes(){
        findDocumentTypes().then(res => {
          this.documentTypeList = res;
        })
      },
  },
  //在实例化之后
  created() {
    this.getList();
    this.findResidentsTypes();
    this.findBuildingblock();
    this.findUnit();
    this.findFloor();
    this.findResidentLabels();
    this.findDocumentTypes();
    this.findRoom();
  },



}

</script>



<style>
.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}

.avatar-uploader .el-upload:hover {
  border-color: #409EFF;
}

.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  line-height: 178px;
  text-align: center;
}

.avatar {
  width: 178px;
  height: 178px;
  display: block;
}





/* 半体 */



.grid-content {

  border-radius: 4px;

  min-height: 36px;

  box-shadow: 0 4px 6px rgba(61, 61, 61, 0.1), 0 -4px 6px rgba(61, 61, 61, 0.1),

    -4px 0 6px rgba(61, 61, 61, 0.1), 2px 0 6px rgba(61, 61, 61, 0.1);

}

.bg-purple {

  background: #ffffff;

  height: 540px;

  margin-top: 15px;

}

/* 按钮 */

.el-row {

  display: flex;

  justify-content: flex-start;

}



.el-button+.el-button,

.el-upload+.el-button {

  margin-left: 10px;

}



/* form表单 */

.custom-select .el-input__inner {

  width: 140px;

}



/* header */

.bg-purple-dark {

  background: #ffffff;

  margin-top: 25px;

  /* height: 100px; */

  padding-top: 10px;

  padding-bottom: 10px;

  padding-left: 20px;

  box-shadow: 0 4px 6px rgba(61, 61, 61, 0.1), 0 -4px 6px rgba(61, 61, 61, 0.1),

    -4px 0 6px rgba(61, 61, 61, 0.1), 2px 0 6px rgba(61, 61, 61, 0.1);

}



.grid-content {

  border-radius: 4px;

  min-height: 36px;

}
</style>
